import React,{Component} from 'react';
import {Input,Button,Icon} from 'antd';
import axios from 'axios';
import './index.scss';
class Lognin extends Component{
    constructor(){
        super();
        this.state = {
            phone:'',//电话号码
			smsCode:'',//验证码
			smsCoderi:0,//正确的验证码
			smsCodeType:true,//登录按钮的状态
            buttonText:'获取验证码',
            disabled:false,
        }
    }
    //点击返回首页
    backFunclo=()=>{
        this.props.history.push('/');
        // console.log("shfkashfkjsahfkjsa")
    }
    //将输入的电话号码存入state中
    changePhoneFunc=(ev)=>{

        this.setState({
            phone:ev.target.value
        })
        
    }
    changeSmsCodeFunc=(ev)=>{

        this.setState({
            smsCode:ev.target.value
            
        })
		// console.log(this.state.phone)
		
    }

    //发送验证码
	//注意this指向
	sendSmsCode=()=>{

        // var phone = document.getElementById('phone').value;
        // if(!(/^1(3|4|5|7|8)\d{9}$/.test(phone))){ 
        // alert("手机号码有误，请重填");  
        // return false; 
        // } 
		//空白符
		let reg = /\S/;
		//手机格式()
		let re = /^1(3|4|5|7|8)\d{9}$/;
		//去掉空格
		let phone = this.state.phone.trim();
		//判断手机号码是否为空
		if(phone === '' || !reg.test(phone)){
			alert('请输入手机号码')
		}else if(!re.test(phone)){// 判断手机号码格式是否正确
			alert('手机号码格式错误');
		}else{//都符合，发送验证码
			//发送验证码，调用接口，更改按钮的状态和文字

			axios(
				{
					method:'get',
					url:'http://192.168.2.251:7001/sms/addSms?phone='+phone
				}
			).then((res)=>{
				// console.log(res);
				//将提示信息保存到des中
				this.setState({
					des:res.data.success,
					disabled:true
					
				})
				//将按钮的文字进行更改
				let i= 60;
				let inter = setInterval(()=>{
					this.setState({
						buttonText:'重新获取('+i+'s)',
					})
					if(i<=0){
						this.setState({
							buttonText:'获取验证码',
							des:'',
							disabled:false
						})
						clearInterval(inter);
					}
					i = i-1;
				},1000)				
			})	
			// console.log(this.state.smsCodeType);
			//获取验证码用来对比输入的验证码正确不
			let inter1 = setTimeout(()=>{
				axios({
					method:'get',
					url:'http://192.168.2.251:7001/sms/querySms?phone='+phone
					// http://192.168.2.251:7001/sms/querySms?phone=13444444444
				}).then((resp)=>{
					// console.log(resp);
					console.log(resp.data.success.smsCode);

					clearTimeout(inter1);
					this.setState({
						smsCoderi:resp.data.success.smsCode
					})
				})
			},1000)
			
			
			
		}					
	}
	onChange=()=>{
		let smsCode = Number(this.state.smsCode.trim());
		let smsCoderi = Number(this.state.smsCoderi);
		if(!(smsCode === smsCoderi)){
			this.setState({
				smsCodeType:false
			})
		}
		
	}
	
    
    	//登录
	logninFunc=()=>{
		//验证
		//空白符
		let reg = /\S/;
		//手机格式()
		let re = /^1(3|4|5|7|8)\d{9}$/;
		//验证码格式
		let reSms = /^\d{4}$/;
		
		//去掉空格
		let phone = this.state.phone.trim();
		let smsCode = Number(this.state.smsCode.trim());
		let smsCoderi = Number(this.state.smsCoderi);
		// console.log(smsCode,smsCoderi);
		
		//开始验证
		if(phone === '' || !reg.test(phone) ){
			alert('请输入手机号码');
		}else if(smsCode === '' || !reg.test(smsCode)){
			alert('请输入验证码');
		}else if(!(smsCode === smsCoderi)){
			this.setState({
				smsCodeType:true
			})
			alert("验证码错误")
		}else if(!re.test(phone)){
			alert(smsCode);
			alert('手机号码格式错误');
		}else if(!reSms.test(smsCode)){
			alert('验证码格式错误');		
		}else{//格式正确时，调用登录接口
			//post参数
			var params = new URLSearchParams();
			params.append('phone',this.state.phone);
			params.append('smsCode',this.state.smsCode);			
			
			axios({
				method:'post',
				url:'http://192.168.2.251:7001/user/login',
				data:params//post传递的参数
			}).then((res)=>{
				// console.log(res.data.code);
                //保存token
                if(! (res.data.code === 1)){
                    localStorage['token'] = res.data.data.token;
                }else{
                    console.log('token没有获取成功')
                }
				
				
				//跳转
				this.props.history.push('/center');	
			})
		}
		
		
		
	}

    //离开时终止当前页面的数据请求
    componentWillUnmount(){
		this.setState = (state,callback)=>{
			return;
		}
	}
    render(){
        return (
            <div id="lognin">
                <div className='lognin_title'><div className="div1" onClick={this.backFunclo}><Icon type="left" className="leftBack" /></div><div className="div2">登录/注册</div></div>
                <div className='lognin_conte'>
                    <Input type="text" className='lognin_input1' placeholder="输入手机号码" name='phone' onInput={this.changePhoneFunc}/>
                    <br/>
                    <br/>
                    <Input type='text' className='lognin_input2' placeholder='输入验证码' name='smsCode' onInput={this.changeSmsCodeFunc} onChange={this.onChange}/>
                    <Button type='primary' disabled={this.state.disabled} className='lognin_button1' onClick={this.sendSmsCode}>{this.state.buttonText}</Button>
                    <br/>
                    <br/>
                    <Button type='primary' disabled={this.state.smsCodeType} className='lognin_button2' onClick={this.logninFunc}>登录</Button>
                </div>
            </div>
        )
    }
}
export default Lognin;